<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script type="text/javascript" src="../jquery.min.js"></script>
	<script src="S.js"></script>
	<style type="text/css">
		#xxx{
			position: absolute;
			top: 100px;left: 100px;
			background: #ccc;
			width: 300px;height: 300px;
		}
		#EE{
			width: 100%;
			height: 30px;
			background: blue;
			cursor: pointer;
		}
		
		#x{
			
			width:300px;
			height:1px;
			background: #ccc;
			border-top: 1px solid #ccc;
			position:absolute;
			top: 100px;
			left: 500px;
		}
		#x1{
			height:10px;
			width:10px;
			background:#888;
			position:absolute;
			top:-5px;
			left:0px;
			cursor: pointer;
		}
		#xx{
			
			width:400px;
			height:1px;
			background: #ccc;
			border-top: 1px solid #ccc;
			position:absolute;
			top: 130px;
			left: 500px;
		}
		#x2{
			height:10px;
			width:10px;
			background:#888;
			position:absolute;
			top:-5px;
			left:0px;
			cursor: pointer;
		}
		#y{
			
			height:300px;
			width:1px;
			background: #ccc;
			border-top: 1px solid #ccc;
			position:absolute;
			top: 170px;
			left: 500px;
		}
		#y1{
			height:10px;
			width:10px;
			background:#888;
			position:absolute;
			top:0px;
			left:-5px;
			cursor: pointer;
		}
		#yy{
			
			height:400px;
			width:1px;
			background: #ccc;
			position:absolute;
			top: 170px;
			left: 530px;
		}
		#y2{
			height:10px;
			width:10px;
			background:#888;
			position:absolute;
			top:0px;
			left:-5px;
			cursor: pointer;
		}
		
		#e1{
			position: absolute;
			height:10px;
			width:300px;
			bottom:100px;
			background: #ccc;
			border-radius:5px;
		}
		#eex{
			left:0px;
			height:10px;
			width:20px;
			background: #333;
			cursor: pointer;
			border-radius:5px;
			position:absolute;
		}
		
		#e2{
			width: 100px;
			height: 100px;
			position: absolute;
			left: 400px;
			top: 600px;
			border: 1px solid #333;
		}
	</style>
</head>
<body>
	<div id="xxx">
		<div id="EE"></div>
	</div>
	
	<div id="x">
		<div id="x1"></div>
	</div>
	<div id="xx">
		<div id="x2"></div>
	</div>
	
	<div id="y">
		<div id="y1"></div>
	</div>
	<div id="yy">
		<div id="y2"></div>
	</div>
	
	<div id="e1">
		<div id="eex"></div>
	</div>
	
	
	<div id="e2">
	</div>
	
</body>
<script type="text/javascript">
	 var draggable=  new S.Dragable({
		el:document.getElementById('xxx'),
		handle:document.getElementById('EE')
	});
	

	 
	 new S.Dragable({
		 el:document.getElementById('x1'),
		 axis:'x',
			region:{
				left:0,
				right:'100%',
			}
	 });
	 new S.Dragable({
		 el:document.getElementById('x2'),
		 axis:'x',
			region:{
				left:0,
				right:'100%',
			}
	 });
	 new S.Dragable({
		 el:document.getElementById('y1'),
		 axis:'y',
			region:{
				top:0,
				bottom:'100%',
			}
	 });
	 new S.Dragable({
		 el:document.getElementById('y2'),
		 axis:'y',
			region:{
				top:0,
				bottom:'100%',
			}
	 });
	 new S.Dragable({
		 el:document.getElementById('eex'),
		 axis:'x',
			region:{
				left:0,
				right:'100%',
			}
	 });
	 
	 new S.Dragable({
		 el:document.getElementById('e2'),
		 region:{
				left:400,
				bottom:800,
				right:800,
				top:400
		},
		position:function(data){
			data.top = this.data.x - data.left  +this.data.y;
			
			$('#EE').text(
					data.left + ' '  +data.top);
			
			return data;
		}
	 });
	 
	/* 
	var draggablex = new S.Dragable({
		axis:'x',
		region:{
			left:0,
			right:'100%',
		}
	});
	draggablex.bind(document.getElementById('x1'));
	draggablex.bind(document.getElementById('x2'));
	var draggablex = new S.Dragable({
		axis:'y',
		region:{
			top:0,
			bottom:'100%',
		}
	});
	draggablex.bind(document.getElementById('y1'));
	draggablex.bind(document.getElementById('y2'));
	
	var draggablee1 =  new S.Dragable({
		axis:'x',
		region:{
			left:0,
			right:'100%',
		}
	});
	draggablee1.bind(document.getElementById('eex'));
	
	var draggablee2 =  new S.Dragable({
		position:function(data){
			data.top = data.x - data.left  +data.y;
			
			$('#EE').text(
					data.x+' ' + data.y + ' ' + 
					data.left + ' '  +data.top);
			
			return data;
		},
		region:{
			left:400,
			bottom:800,
			right:800,
			top:400
		}
	});
	draggablee2.bind(document.getElementById('e2')); */
</script>
</html>